<template>
	<view class="">
		<u-navbar title='打卡记录' :autoBack="true" bgColor="transparent"></u-navbar>
				<image src="https://renovationcdn.jiachuangnet.com/talentPool/bg6.png"
					style="width: 100%;height:363rpx;position: absolute;top:0;left:0;z-index: 10"></image>
				
				<u-picker :show="show" @cancel="show=false" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker>
				<view style="position: absolute;width:700rpx;left:25rpx;top:180rpx;z-index: 11;">
					<view style="margin:0 auto;padding: 15rpx 10rpx;position: relative;" @click="show=true">
						<!-- <u--input v-model="keyValue"  :disabled="true" ></u--input> -->
						<view class="flex" style="justify-content: start;color: #909399;">
							<u-icon name="home-fill" color="#909399;" size="20"></u-icon>
							公司:{{keyValue.companyName||'请选择公司名称'}}
						</view>
						<view class="flex" style="justify-content: start;color: #909399;">
							<u-icon name="account-fill" color="#909399;" size="20"></u-icon>
							经理:{{keyValue.userName||'请选择经理'}}
						</view>
						<view style="position: absolute;right: 20rpx;top:50%;transform: translate(0,-50%);" @click="show=true">
							<!-- <u-icon name="arrow-down" color="#909399;" size="20" ></u-icon> -->
							<u-icon name="arrow-down" color="#909399;" size="20" ></u-icon>
						</view>
						<!-- <view class="flex" style="justify-content: center;color: #909399;">
							<u-icon name="home-fill" color="#909399;" size="28rpx"></u-icon>
							店名:{{keyValue.assignName||'请选择店铺名称'}}
						</view> -->
					</view>
					
				
					<view class="content">
						
						 <u-list>
						      <u-list-item v-for="(v,i) in assignTaskList" :key='i'>
								  <view class="task_assignment_item"   @click="openSignFn(v)">
										<view class="flex">
											<image style="width: 30rpx;height: 30rpx;margin-right: 20rpx;vertical-align: middle;"
											 	src="https://renovationcdn.jiachuangnet.com/index/homeIcon.png">
											 </image>
											 {{v.assignName}}
										</view>
										<u-icon name="arrow-down"  size="20" color="#909399" v-if="v.assignTaskId==showAssignTaskId"></u-icon>
										<u-icon name="arrow-up"  size="20" color="#909399" v-else></u-icon>
								  </view>
								  
						      </u-list-item>
						</u-list>	
						
						
					</view>
					<u-popup :show="showSingle" @close="close" @open="getSignList" round="10" mode="bottom">
						<view class="list_contruct">
							<view class="list_contruct_title">
								<text>打卡日志-{{keyValue.assignName}}</text>
							</view>
							<view style="width: 100%;height: 50vh;margin-bottom: 50rpx;box-sizing: border-box;" v-if="signList.length===0">
								<u-empty
								        mode="data"
								        icon="https://renovationcdn.jiachuangnet.com/empty.jpg"
										width="100%"
										height="100%"
								>
								</u-empty>
							</view>
							 <u-list v-else>
							      <u-list-item v-for="(v,i) in signList" :key="i" >
									<view class="sign_item">
										<view class="master_wrapper ">
											<view class="master_right">
												<view class="flex" style="padding: 11rpx 0;">
													<view class="flex">
														<view class="flex" style="margin-right: 20rpx;">
															<u-icon name="account-fill" color="#1E272E;" size="28rpx"></u-icon><text class="name" style="padding-left: 20rpx;">打卡人:{{v.userName}}</text>
														</view>
														<view class="flex">
															<u-icon name="checkmark-circle-fill" :color="v.status==1?'#249442':'#2f7aea'" size="28rpx"></u-icon><text class="post" style="padding-left: 20rpx;">打卡状态:{{v.status==1?'上班':'下班'}}</text>
														</view>
													</view>
													
												</view>
												
												<view class="introduce flex" style="padding: 11rpx 0;justify-content: start;" @click="toPath(v.userId)">
													<u-icon name="clock-fill" color="#909399;" size="28rpx"></u-icon><text class="post" style="padding-left: 20rpx;">打卡时间:{{v.signInTime}}</text>
												</view>
											</view>
										</view>
									</view>
							      </u-list-item>
							</u-list>
						</view>
					</u-popup>
					<view style="width: 100%;height: 50vh;" v-if="assignTaskList&&assignTaskList.length===0">
						<u-empty
						        icon="https://renovationcdn.jiachuangnet.com/empty.jpg"
								width="100%"
								height="100%"
								text="数据为空"
						>
						</u-empty>
					</view>
				</view>
	</view>
</template>

<script>
	import { numberToChanie } from '../../util.js'
	export default{
		data() {
			return {
				show:false,
				columns:[],
				keyValue:{companyName:'',assignName:'',userName:''},
				companyList:null,
				companyId:0,
				assignTaskList:null,
				signList:[],
				firstLoad:true,
				managerList:null,
				showAssignTaskId:0,
				showSingle:false,
			}
		},
		onShow(){
			this.firstLoad=true
			this.getCompanyListMini()
		},
		filters:{
			numberToChanieFilter(num){
				return numberToChanie(num)
			}
		},
		methods: {
			close(){
				this.showSingle=false,
				this.keyValue.assignName=''
				this.showAssignTaskId=0
				this.signList=[]
			},
			openSignFn(assignTask){
				this.keyValue.assignName=assignTask.assignName
				this.showAssignTaskId=assignTask.assignTaskId
				this.showSingle=true
			},
			getCompanyListMini(){
				uni.$u.http.get('/company/getCompanyListMini',{
					params:{
						pageNumber:1,
						pageSize:999999,
					}
				}).then((res)=>{
					if(res.data){
						this.companyList=res.data
						const columnsTemp=res.data.map(item=>item.companyName)
						this.$set(this.columns,0, columnsTemp);
						if(res.data.length&&res.data[0]){
							this.keyValue.companyName=res.data[0].companyName
							// this.getAssignTaskList(res.data[0].companyId)
							this.getManagerList(res.data[0].companyId)
						}
					}
					
				})
			},
			getManagerList(companyId){
				uni.$u.http.get('/sign/getManagerList',{
					params:{
						companyId
					}
				}).then(res=>{
					if(res){
						this.managerList=res
						const columnsTemp=res.map(item=>item.userName)
						this.$set(this.columns,1, columnsTemp);
						if(this.firstLoad&&res.length){
							this.keyValue.userName=res[0].userName
							// 获取对应门店
							this.getAssignTaskList(res[0].userId)
							
							
							// uni.$u.http.post('/sign/getSignList',{
							// 	taskId:res.data[0].assignTaskId
							// }).then((res)=>{
							// 	if(res){
							// 		this.signList=res
							// 	}
							// })
							 
							 
							 
							this.firstLoad=false
						}
					}
				})
			},
			getSignList(){
				uni.$u.http.post('/sign/getSignList',{
					taskId:this.showAssignTaskId
				}).then((res)=>{
					if(res){
						this.signList=res
					}
				})
			},
			getAssignTaskList(userId){
				uni.$u.http.get('/sign/getTaskByUserId',{
					params:{
						userId,
					}
				}).then((res)=>{
					if(res){
						this.assignTaskList=res
						
					}
				})
				
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
			    console.log('confirm', e)
				if(e.indexs[1]||e.indexs[1]==0){
					const userId = this.managerList[e.indexs[1]].userId
					this.keyValue.companyName=this.companyList[e.indexs[0]].companyName
					this.keyValue.userName=this.managerList[e.indexs[1]].userName
					
					// uni.$u.http.post('/sign/getSignList',{
					// 	taskId:assignTaskId
					// }).then((res)=>{
					// 	if(res){
					// 		this.signList=res
					// 	}
					// })
					this.getAssignTaskList(userId)
				}
				this.show = false
			},
			changeHandler(e) {
				const {
			        columnIndex,
			        value,
			        values, // values为当前变化列的数组内容
			        index,
			    } = e
				console.log(e)
			    // 当第一列值发生变化时，变化第二列(后一列)对应的选项
			    if (columnIndex === 0) {
					this.getManagerList(this.companyList[index].companyId)
			        // picker为选择器this实例，变化第二列对应的选项
			        // picker.setColumnValues(1, this.columnData[index])
			    }
			}
			
		}
				
				
				
	}
</script>

<style>
page{
background:#f8f8f8;
}
</style>
<style lang="scss" scoped>
	.list_contruct_title {
		font-weight: 700;
		display: flex;
		justify-content: center;
		padding: 20rpx 0;
	}
	
	::v-deep.list_contruct{
		margin-bottom: 25rpx;
		.u-list{
			height: 55vh !important;
		}
	}
	.task_assignment_item{
		display: flex;
		justify-content: space-between;
		width: 660rpx;
		padding: 20rpx;
		background-color: white;
		margin: 5rpx auto;
		border-bottom: 1px solid #eaebec;
	}
	.item {
		width: 700rpx;
		// height: 342rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: white;
		margin-bottom: 20rpx;
		position: relative;
		padding-bottom: 20rpx;
	}
	.itemHeader {
		width: calc(100% - 40rpx);
		padding: 20rpx;
		background: linear-gradient(to right, #e7f4f5, #fff);
	}
	
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.val_1{
		width: auto;
		text-align: unset;
	}
	.label_1{
		width: auto;
		margin-right: 5rpx;
	}
	.day{
		text-align: center;
		line-height:89rpx;
		font-weight: 700;
		font-size: 16rpx;
		color: #fff;
		transform: rotate(-20deg);
		vertical-align: middle;
		  word-break:keep-all;
		  white-space:nowrap; 
	}
	.content {
		width: 700rpx;
		margin: 0 auto;
	}
	
	
	.sign_item {
		width: 660rpx;
		padding: 20rpx;
		background-color: white;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}
	
	.search{
		width: 400rpx;
		border-radius: 40rpx;
		position: absolute;
		top: 100rpx;
		left: 0;
		right: 0;
		z-index: 11;
	}
	
	.master_wrapper{
		display: flex;
		padding: 10rpx 11rpx;
		.master_left{
			flex:1;
			margin-top: 11rpx;
		}
		.master_right{
			.text{
				font-weight: 500;
				font-size: 28rpx;
				color: #8A8A8A;
			}
			// width: 560rpx;
			padding-left: 16rpx;
			.name{
				font-size: 28rpx;
				color: #8A8A8A;
			}
			.post{
				font-weight: 500;
				font-size: 28rpx;
				color: #8A8A8A;
			}
			.verity{
				width: 86rpx;
				line-height: 38rpx;
				background: #13989A;
				border-radius: 10rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
			}
			.introduce{
				font-weight: 500;
				font-size: 26rpx;
				color: #8A8A8A;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		
	}
</style>